<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
	.tablebox{
		width: 600px;
		margin: 0 auto;
		margin-top: 50px;
		text-align: center;
		
	}
	
</style>
</head>
<body>
	<table class="tablebox" border="1px">
		<th style="text-align: center" colspan="5">
			<input type="button" value="添加"  />
			<input type="button" value="删除" onclick="remove()"/>
		</th>
		<tr>
			<th><input type="checkbox" id="checkAll">全选</th>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
		
		<tr>
			<td><input type="checkbox" class="checkOne"></td>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>40</td>
		</tr>
		<tr>
			<td><input type="checkbox" class="checkOne"></td>
			<td>2</td>
			<td>李四</td>
			<td>男</td>
			<td>34</td>
		</tr>
		<tr>
			<td><input type="checkbox" class="checkOne"></td>
			<td>1</td>
			<td>王五</td>
			<td>男</td>
			<td>30</td>
		</tr>
		<tr>
			<td><input type="checkbox" class="checkOne"></td>
			<td>4</td>
			<td>赵六</td>
			<td>男</td>
			<td>29</td>
		</tr>
		
	</table>
	<script>
		var checkBoxs=document.querySelectorAll('input.checkOne');
		document.onclick=function(e){
			if(e.target.id=="checkAll"){
				
				if(e.target.checked){
					for(let checkBox of checkBoxs){
						checkBox.checked=true;
					}
				}else{
					for(let checkBox of checkBoxs){
						checkBox.checked=false;
					}
				}
			// console.log(e.target.id);
				// console.log(checkBoxs);
		
			}
		
		}
		
		for(let checkBox of checkBoxs){
			checkBox.onclick=function(){
				// if(this.checked){
					
					var nametd=this.parentElement.
					nextElementSibling.nextElementSibling;
					
					alert(nametd.innerHTML);
			
				}
				// console.log(this.parentElment.nextElementSibling.nextElementSibling);
				// console.log(checkBox);
			}
		
		
		
		
		function remove(){
			var checkedBoxs=document.
			querySelectorAll('input.checkOne:checked');
			
			for(let checkedBox of checkedBoxs){
				var delEle=checkedBox.parentElement.parentElement;
				var targetEle=delEle.parentElement;
				targetEle.removeChild(delEle);
				 // console.log(targetEle);
			}
			
			
			// console.log(checkedBoxs);
			
			
		}

		
		
		
	
		
	</script>
</body>
</html>
